<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2022-09-06 14:09:26
 * @LastEditTime: 2024-07-16 13:50:29
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <div>
    <DefaultTableList
      ref="tableListRef"
      :loadMethod="pagePayOrder"
      :formOptions="formOptions"
      :btns="btns"
      :beforeLoad="beforeLoad"
      :controlEvents="{ recharge }"
      :tableConfig="columns">
      <!-- <template #left>
        <div>标准总计：<span text-red font-bold>{{ 6225 }}</span> 元， 实收总计：<span text-red font-bold>{{ 4873.8 }}</span> 元</div>
      </template> -->
      <template #status="{ scope }">
				<dict-tag :options="order_status" :value="scope.row.orderStatus"></dict-tag>
			</template>
      <template #handleSlot="{ scope }">
        <el-button
          v-if="scope.row.orderStatus == 0"
          type="success"
          link
          size="small"
          @click="pay(scope.row)"
        >付款</el-button>
        <el-button
          v-if="scope.row.orderStatus == 1"
          type="danger"
          link
          size="small"
          @click="cancel(scope.row)"
        >退款</el-button>
      </template>
    </DefaultTableList>
    <RechargeModal ref="rechargeModalRef" />
    <RefoundModal ref="refoundModalRef" @success="reload" />

  </div>
</template>

<script setup>

import { ref } from 'vue'
import { formOptions, btns } from './control'
import columns from './columns'
import DefaultTableList from '@/components/DefaultTableList/index.vue'
import RechargeModal from '../../components/RechargeModal/index.vue'
import RefoundModal from '../../components/RefoundModal/index.vue'
import handleClipboard from '@/utils/clipboard';
import { getBirth, getSex } from '@/utils/id-card'
import { pagePayOrder, bbOrderRefund, getPayUrl } from '@/api/insurance'
import { useDict } from '/@/hooks/dict';
import { downBlobFile } from '/@/utils/other';
import { dayjs, ElMessage, ElMessageBox } from 'element-plus';

const { order_status } = useDict('order_status');

const tableListRef = ref()

const beforeLoad = (params) => { 
  const { dateRange } = params
  delete params.dateRange
  return {
    startDate: dateRange && dateRange.length > 0 ? dateRange[0] + ' 00:00:00' : '',
    endDate: dateRange && dateRange.length > 0 ? dateRange[1] + ' 23:59:59' : '',
    ...params
  }
}

// buttom config --------------------------------------------------------------
const insert = () => {}

const rechargeModalRef = ref()
const recharge = () => { 
  console.log('recharge');
  rechargeModalRef.value.show()
}

const refoundModalRef = ref()
const cancel = async (row) => {
  refoundModalRef.value.show(row)
}

const pay = (row) => {
  ElMessageBox.confirm('确认要支付该订单吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
    if (row.payUrl) {
      window.location.href = row.payUrl
    }
	});
}

const reload = () => {
  tableListRef.value.reload()
}

</script>
